import React from 'react';
import { Form, Input, Row, Col, DatePicker, Select, Icon } from 'antd';
import moment from 'moment';

import { CONTACT_WAY } from '@/pages/Recruitment/dictionary';
import { UploadOssCompact } from '@/containers';
import NoHoverReorderButton from '../../containers/NoHoverReorderButton';
import styles from './Contact.less';

const { Option } = Select;

const getKey = communicateInfo => communicateInfo.key || communicateInfo.id; // 获取列表的key

function Contact({
    form,
    index,
    // commInfo,
    talentInfo,
    isEdit,
    oneLineLayout,
    renderItem,
    recordButtonRef,
    scrollWrapRef,
    allowRemove,
    communicateInfo,
    handleRemove = () => {}
}) {
    const { getFieldDecorator } = form;
    const [localIsEdit] = React.useState(communicateInfo.id ? false : isEdit);
    const contactWayValue = localIsEdit
        ? form.getFieldValue(`recruitEmployContactDTOList[${getKey(communicateInfo)}].communicateType`) ||
          CONTACT_WAY[0].value
        : communicateInfo.communicateType;

    const currentContactWay = CONTACT_WAY.find(item => item.value === contactWayValue)?.text;
    // console.log(`currentContactWay:${currentContactWay},contactWayValue:${contactWayValue}`);

    const initRecordUrl = communicateInfo.recordUrl;

    const renderRecorder = () => {
        if (localIsEdit && !initRecordUrl) {
            return (
                <div style={{ width: 120 }}>
                    <NoHoverReorderButton preventFloat cRef={recordButtonRef} scrollWrapRef={scrollWrapRef} />
                </div>
            );
        }
        if (initRecordUrl) {
            return (
                <>
                    <audio src={initRecordUrl} controls="controls" style={{ height: 30, width: 240 }}>
                        <track kind="captions" />
                    </audio>
                    <div style={{ display: 'none' }}>
                        {getFieldDecorator('recordUrl', { initialValue: initRecordUrl })(<Input />)}
                    </div>
                </>
            );
        }
        return <span>当前无录音</span>;
    };
    return (
        <div className={styles.contactWrapper}>
            {allowRemove ? (
                <div
                    className={styles.closeIcon}
                    onClick={() => {
                        handleRemove(index);
                    }}
                >
                    <Icon type="close-circle" theme="filled" />
                </div>
            ) : null}
            <Row>
                <Form.Item style={{ display: 'none' }} label="隐藏项目，用于展示id">
                    {getFieldDecorator(`recruitEmployContactDTOList[${getKey(communicateInfo)}].id`, {
                        initialValue: communicateInfo.id || undefined
                    })(<input />)}
                </Form.Item>
                <Col span={12}>
                    <Form.Item label="联系时间">
                        {renderItem(
                            getFieldDecorator(`recruitEmployContactDTOList[${getKey(communicateInfo)}].contactTime`, {
                                initialValue: moment(communicateInfo.contactTime) || moment(),
                                // initialValue: moment(),
                                rules: [
                                    {
                                        required: true,
                                        message: '联系时间不能为空'
                                    }
                                ]
                            })(
                                <DatePicker
                                    showTime={{ format: 'HH:mm' }}
                                    format="YYYY-MM-DD HH:mm"
                                    placeholder="请选择联系时间"
                                    style={{ width: '100%' }}
                                />
                            ),
                            communicateInfo.contactTime,
                            localIsEdit
                        )}
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="联系方式">
                        {renderItem(
                            getFieldDecorator(
                                `recruitEmployContactDTOList[${communicateInfo.key ||
                                    communicateInfo.id}].communicateType`,
                                {
                                    initialValue: communicateInfo.communicateType || CONTACT_WAY[0].value,
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择联系方式'
                                        }
                                    ]
                                }
                            )(
                                <Select
                                    placeholder="请选择联系方式的类型"
                                    getPopupContainer={triggerNode => triggerNode.parentElement}
                                >
                                    {CONTACT_WAY.map(item => (
                                        <Option value={item.value} key={item.value}>
                                            {item.text}
                                        </Option>
                                    ))}
                                </Select>
                            ),
                            `${currentContactWay || ''}-${communicateInfo.contactInfo || ''}`,
                            localIsEdit
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row>
                {localIsEdit && (
                    <Col span={12}>
                        <Form.Item label={currentContactWay}>
                            {getFieldDecorator(`recruitEmployContactDTOList[${getKey(communicateInfo)}].contactInfo`, {
                                initialValue: communicateInfo.contactInfo || talentInfo.talentPhone
                            })(<Input placeholder={`请输入${currentContactWay}`} allowClear maxLength={50} />)}
                        </Form.Item>
                    </Col>
                )}
                <Col span={12}>
                    <Form.Item label="沟通录音">{renderRecorder()}</Form.Item>
                </Col>
            </Row>
            <Row>
                <Col span={24}>
                    <Form.Item
                        label="沟通证明"
                        extra={
                            localIsEdit
                                ? '支持 jpg、jpeg、png、mp3、wps、doc、docx、pdf 等格式的附件，单个文件大小为100M以内'
                                : ''
                        }
                        {...oneLineLayout}
                    >
                        {getFieldDecorator(`recruitEmployContactDTOList[${getKey(communicateInfo)}].communicateUrl`, {
                            initialValue: communicateInfo.communicateUrl
                        })(
                            <UploadOssCompact
                                rules={[
                                    { max: 100 },
                                    { type: ['jpg', 'png', 'jpeg', 'mp3', 'wps', 'doc', 'docx', 'pdf'] }
                                ]}
                                editable={localIsEdit}
                            />
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </div>
    );
}

export default React.memo(Contact);
